<template>
  <div id="index" v-loading="!userInfo">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <div class="left">
          <i class="el-icon-s-fold my-icon" @click="toggleCollapse"></i>
          <img src="@/assets/logo-big.png" class="logo" alt="" />
          <h2>黑马面面</h2>
        </div>

        <div class="right">
          <div class="avatar">
            <img :src="avatarUrl" alt="" />
          </div>
          <b>{{ userInfo && userInfo.username }},你好</b>
          <el-button type="primary" class="logOut" size="mini" @click="logout"
            >退出</el-button
          >
        </div>
      </el-header>

      <el-container>
        <!-- 侧边栏 -->
        <el-aside
          width="auto"
          style="background-color: rgb(255 , 255, 255)"
          class="aside"
        >
          <el-menu
            class="el-menu-vertical-demo my-ul"
            :collapse="isCollapse"
            router
            :default-active="defaultActive"
          >
            <el-menu-item index="/index/chart"
              ><i class="el-icon-pie-chart"></i><b slot="title">数据概览</b>
            </el-menu-item>
            <el-menu-item index="/index/user"
              ><i class="el-icon-user"></i><b slot="title">用户列表</b>
            </el-menu-item>
            <el-menu-item index="/index/question"
              ><i class="el-icon-edit-outline"></i><b slot="title">题库列表</b>
            </el-menu-item>
            <el-menu-item index="/index/company"
              ><i class="el-icon-office-building"></i
              ><b slot="title">企业列表</b>
            </el-menu-item>
            <el-menu-item index="/index/subject"
              ><i class="el-icon-notebook-2"></i><b slot="title">学科列表</b>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 主体 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 获取数据导包
import { getUserData } from '@/api/index.js'

import { removeToken, getToken } from '@/utils/token.js'
// import { removeToken } from '@/utils/token.js'

export default {
  name: 'index',
  data () {
    return {
      // 布尔值而不能是字符串类型
      isCollapse: false,
      defaultActive: this.$route.path,
      userInfo: undefined // 定义一个undefined 可以判断是否有值
    }
  },
  created () {
    // 判断是否拥有Token
    if (!getToken()) {
      this.$message.error('请先登录')
      this.$router.push('/login')
      return
    }

    // 当被创建的时候就调用获取数据的方法
    getUserData().then(res => {
      // console.log(res)
      this.userInfo = res.data.data

      // if (res.data.code === 200) {
      //   this.userInfo = res.data.data
      // } else if (res.data.code === 206) {
      //   setTimeout(() => {
      //     this.$message.error('TOKEN不正确')
      //     this.$router.push('/login')
      //   }, 2000)
      // }
    })
  },
  methods: {
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },
    logout () {
      this.$confirm('是否退出登录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          removeToken()
          this.userInfo = undefined
          this.$router.push('/login')
          this.$message({
            type: 'success',
            message: '退出成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  },
  computed: {
    avatarUrl () {
      if (this.userInfo) {
        return process.env.VUE_APP_BaseURL + '/' + this.userInfo.avatar
      }
      return ''
    }
  }
}
</script>

<style lang="less">
#index {
  .el-header,
  .el-footer {
    height: 60px;
    line-height: 60px;
    background-color: #ffffff;
    box-shadow: 0px 2px 5px 2px rgba(63, 63, 63, 0.15);
    z-index: 1;
  }

  .el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right {
      display: flex;
      align-items: center;

      .avatar {
        margin-right: 9px;
        height: 43px;
        width: 43px;
        background-color: tomato;
        border-radius: 50%;
        overflow: hidden;
        img {
          height: 100%;
        }
      }
      .logOut {
        margin-left: 38px;
      }
      b {
        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
        font-size: 14px;
      }
    }
    .left {
      display: flex;
      align-items: center;
      h2 {
        margin-left: 11px;
        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
        font-size: 22px;
        font-weight: bold;
        color: #49a1ff;
      }
      .my-icon {
        font-size: 30px;
        color: #000000;
      }
    }
  }
  .logo {
    margin-left: 20px;
  }

  .el-aside {
    background-color: #fff;
    color: #333;
    // text-align: center;
    // line-height: 200px;
    box-shadow: 2px 9px 5px 2px rgba(63, 63, 63, 0.15);
    z-index: 1;
    .my-ul {
      li {
        height: 60px;
        line-height: 60px;
        font-size: 14px;
        color: #686a6e;
        a {
          b {
            font-size: 14px;
            font-family: Microsoft YaHei Regular,
              Microsoft YaHei Regular-Regular;
          }
        }

        i {
          font-size: 18px;
        }
      }
      .is-active {
        color: #1a8aff;
      }
    }
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-main {
    padding: 20px 18px;
    background-color: #e8e9ec;
    color: #333;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container {
    height: 100vh;
  }
}
</style>
